<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        /* 导航栏样式 */
        .navbar {
            background-color: #333;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
        }
        .logo {
            font-size: 1.5rem;
            font-weight: bold;
        }
        .nav-links a {
            color: white;
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        .nav-links a:hover {
            background-color: #555;
        }
        /* 主要内容区域样式 */
        .main-container {
            display: flex;
            flex: 1;
        }
        /* 左侧菜单样式 */
        .sidebar {
            width: 250px;
            background-color: #f5f5f5;
            padding: 1rem;
            border-right: 1px solid #ddd;
        }
        .menu-item {
            padding: 0.8rem;
            margin-bottom: 0.5rem;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        .menu-item:hover {
            background-color: #e0e0e0;
        }
        .menu-item.active {
            background-color: #4CAF50;
            color: white;
        }
        /* 右侧内容区域样式 */
        .content {
            flex: 1;
            padding: 2rem;
            background-color: white;
        }
        .content-section {
            display: none;
            animation: fadeIn 0.3s ease-in;
        }
        .content-section.active {
            display: block;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        /* 页脚样式 */
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1rem;
            margin-top: auto;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="logo">网站名称</div>
        <div class="nav-links">
            <a href="login.html">登录</a>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="main-container">
        <!-- 左侧菜单 -->
        <div class="sidebar">
            <div class="menu-item active" onclick="showContent('home')">首页</div>
            <div class="menu-item" onclick="showContent('about')">关于我们</div>
            <div class="menu-item" onclick="showContent('services')">服务</div>
            <div class="menu-item" onclick="showContent('contact')">联系我们</div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="content">
            <div id="home" class="content-section active">
                <h2>欢迎来到我们的网站</h2>
                <p>这是首页内容区域。您可以在这里放置网站的主要信息和介绍。</p>
            </div>
            <div id="about" class="content-section">
                <h2>关于我们</h2>
                <p>这是关于我们的内容区域。您可以在这里介绍公司或团队的信息。</p>
            </div>
            <div id="services" class="content-section">
                <h2>我们的服务</h2>
                <p>这是服务内容区域。您可以在这里展示提供的服务项目。</p>
            </div>
            <div id="contact" class="content-section">
                <h2>联系我们</h2>
                <p>这是联系我们的内容区域。您可以在这里放置联系方式。</p>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <p>&copy; 2024 示例网站. 保留所有权利.</p>
    </footer>

    <script>
        function showContent(contentId) {
            // 隐藏所有内容
            document.querySelectorAll('.content-section').forEach(section => {
                section.classList.remove('active');
            });
            // 显示选中的内容
            document.getElementById(contentId).classList.add('active');
            // 更新菜单项的激活状态
            document.querySelectorAll('.menu-item').forEach(item => {
                item.classList.remove('active');
            });
            event.target.classList.add('active');
        }
    </script>
</body>
</html> 